import * as React from "react"
import { observer, inject } from "mobx-react"
import { ViewStyle, View, TextStyle, TextInput, TouchableWithoutFeedback } from "react-native"
import { Screen } from "../../components/screen"
import { NavigationScreenProps } from "react-navigation"
import { ElementsIcon as Icon } from "../../components/elements-icon"
import { px2dp } from "../../utils"

export interface EditUserScreenProps extends NavigationScreenProps<{}> {
  rootStore: any
}

const styledUserNameView: ViewStyle = {
  paddingTop: px2dp(36),
  paddingLeft: px2dp(16),
  paddingRight: px2dp(16)
}

const styledUserNameContent: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  borderBottomWidth: px2dp(1),
  borderBottomColor: "#E0E2E7",
  borderStyle: "solid"
}

const styledUserName: TextStyle = {
  height: px2dp(35)
}

@inject("rootStore")
@observer
export default class EditUsernameScreen extends React.Component<EditUserScreenProps, {}> {
  render() {
    const mineStore = this.props.rootStore.mineStore
    return (
      <Screen style={{ backgroundColor: "#fff" }}>
        <View style={styledUserNameView}>
          <View style={styledUserNameContent}>
            <TextInput
              value={mineStore.changeUsername}
              onChangeText={text => mineStore.changeUsernameOnChange(text)}
              placeholder={"请填写6-16个字母及数字组成的昵称"}
              style={styledUserName}
            />
            {mineStore.changeUsername !== "" ? (
              <TouchableWithoutFeedback onPress={() => mineStore.changeUsernameClear()}>
                <Icon name="close" color="#ccc" />
              </TouchableWithoutFeedback>
            ) : null}
          </View>
        </View>
      </Screen>
    )
  }
}
